<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #table {
            border-collapse:collapse;
            margin: 100px auto 0;
        }
        #table th {
            width: 200px;

        }
        #table caption {
            text-align: left;
        }
        .bot {
            width: 1010px;
            margin: 0 auto;
            border: 1px solid #000;
            display: none;
        }
        .bot table {
            border-collapse: collapse;
            text-align: center;
            margin-left: 40px;
            margin-top:20px;
        }
        .bot #okbtn {
            margin: 10px 0 10px 40px;
        } 
    </style>
</head>
<body>
    <table id='table' border='1px'>
        <caption><button id='newbtn'>新增一行</button></caption>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            <tr>
        </thead>
        <tbody id='tbody'>
            <tr>
                <td>001</td>
                <td>一</td>
                <td>男</td>
                <td>16</td>
                <td>
                    <input type="button" value = '向上移动' name ='top1'>
                    <input type="button" value = '向下移动' name='bottom'>
                    <input type="button" value = '删除' name='del'>
                </td>
            </tr>
            <tr>
                <td>002</td>
                <td>二</td>
                <td>男</td>
                <td>17</td>
                <td>
                    <input type="button" value = '向上移动' name ='top1'>
                    <input type="button" value = '向下移动' name='bottom'>
                    <input type="button" value = '删除' name='del'>
                </td>
            </tr>
            <tr>
                <td>003</td>
                <td>三</td>
                <td>男</td>
                <td>15</td>
                <td>
                    <input type="button" value = '向上移动' name ='top1'>
                    <input type="button" value = '向下移动' name='bottom'>
                    <input type="button" value = '删除' name='del'>
                </td>
            </tr>
            <tr>
                <td>004</td>
                <td>四</td>
                <td>男</td>
                <td>18</td>
                <td>
                    <input type="button" value = '向上移动' name ='top1'>
                    <input type="button" value = '向下移动' name='bottom'>
                    <input type="button" value = '删除' name='del'>
                </td>
            </tr>
            <tr>
                <td>005</td>
                <td>五</td>
                <td>男</td>
                <td>19</td>
                <td>
                    <input type='button' value = '向上移动' name ='top1'>
                    <input type="button" value = '向下移动' name='bottom'>
                    <input type="button" value = '删除' name='del'>
                </td>
            </tr>
            <tr>
                <td>006</td>
                <td>六</td>
                <td>男</td>
                <td>20</td>
                <td>
                    <input type='button' value = '向上移动' name ='top1'>
                    <input type="button" value = '向下移动' name='bottom'>
                    <input type="button" value = '删除' name='del'>
                </td>
            </tr>
        </tbody>
    </table>
    <div class='bot'>
        <table border='1px'>
            <thead>
                <tr>
                    <th width='280px'>学号</th>
                    <th width='280px'>姓名</th>
                    <th width='80px'>性别</th>
                    <th width='280px'>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="text" name='userid'> </td>
                    <td><input type="text" name='username'> </td>
                    <td><select name="" id="sel">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select> </td>
                    <td><input type="text" name='userage'> </td>
                </tr>
            </tbody>
        </table>
        <button id = 'okbtn'>确定</button>
        <button id = 'nobtn'>取消</button>
    </div>
    <script>
        /*
        1.分析需求(交互)：
        1,点击newbtn按钮,出现bottom盒子
        2,点击nobtn,隐藏button盒子
        3,输入信息,点击确定,将所有信息结合,在上面table创建新的行
        4,在table列表中,点击删除,删除这一行
        5,在table列表中,点击向上移动,这一行与上一行进行互换
        6,在table列表中,点击向下移动,这一行与下一行进行互换
        */
        //获取元素
        var newbtn = document.getElementById('newbtn');
        var okbtn = document.getElementById('okbtn');
        var nobtn = document.getElementById('nobtn');
        var sel = document.getElementById('sel');

        var bot = document.getElementsByClassName('bot')[0];
        var tbody = document.getElementById('tbody');

        var delList = document.getElementsByName('del');
        var bottomList = document.getElementsByName('bottom');
        var topList = document.getElementsByName('top1');
        var userid = document.getElementsByName('userid')[0];
        var username = document.getElementsByName('username')[0];
        var userage = document.getElementsByName('userage')[0];
        //注册事件
        // 1,点击newbtn按钮,出现bottom盒子
        newbtn.onclick = function() {
            bot.style.display = 'block';
        }
        // 2,点击nobtn,隐藏button盒子
        nobtn.onclick = function() {
            bot.style.display = 'none';
        }
        // 3,输入信息,点击确定,将所有信息结合,在上面table创建新的行
        okbtn.onclick = function() {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            var td = document.createElement('td');
            tr.appendChild(td)
            td.innerText = userid.value;
            var td = document.createElement('td');
            tr.appendChild(td)
            td.innerText = username.value;
            var td = document.createElement('td');
            tr.appendChild(td)
            td.innerText = sel.value;
            var td = document.createElement('td');
            tr.appendChild(td)
            td.innerText = userage.value;
            var td = document.createElement('td');
            tr.appendChild(td)
            td.innerHTML = "<input type='button' value = '向上移动' name ='top'> <input type='button' value = '向下移动' name='bottom'> <input type='button' value = '删除' name='del'>";
            td.children[0].onclick = top1Click;
            td.children[1].onclick = bottomClcik;
            td.children[2].onclick = delClick;
            bot.style.display = 'none'
        }
        // 4,在table列表中,点击删除,删除这一行
        for(var i = 0; i < delList.length; i++) {
            var del = delList[i];
            del.onclick = delClick;
        }
        function delClick() {
            var isok = confirm('请问是否确认删除');
            if(isok){
                tbody.removeChild(this.parentNode.parentNode);
            }
            
        }
        // 5,在table列表中,点击向上移动,这一行与上一行进行互换
        for(var i = 0; i < topList.length; i++) {
            var top1 = topList[i];
            top1.onclick = top1Click;
        }
        function top1Click() {
            var tr = this.parentNode.parentNode
            if(!tr.previousElementSibling) {
                alert('已经是顶部啦!')
                return;
            }
            tbody.insertBefore(tr,tr.previousElementSibling)
        }
        // 6,在table列表中,点击向下移动,这一行与下一行进行互换
        for(var i = 0; i < bottomList.length; i++) {
            var bottom = bottomList[i];
            bottom.onclick = bottomClcik;
        }
        function bottomClcik() {
            var tr = this.parentNode.parentNode
            if(!tr.nextElementSibling) {
                alert('已经是底部啦!')
                return;
            }
            tbody.insertBefore(tr.nextElementSibling,tr)
        }
    </script>
</body>
</html>